<script setup lang="ts">
import { computed, ref } from 'vue';
import { Button } from 'ant-design-vue';
import { Icon, NoData, Select } from '@xcan-angus/vue-ui';
import { TESTER } from '@xcan-angus/infra';
import { issue } from '@/api/tester';
import { useI18n } from 'vue-i18n';
import { TestMenuKey } from '@/views/test/menu';

import { TaskDetail } from '@/views/issue/types';
import { TaskDetailProps } from '@/views/issue/issue/list/types';

// Component Props & Emits
const props = withDefaults(defineProps<TaskDetailProps>(), {
  projectId: undefined,
  userInfo: undefined,
  appInfo: undefined,
  dataSource: undefined
});

const { t } = useI18n();

const emit = defineEmits<{
  (event: 'loadingChange', value: boolean): void;
  (event: 'change', value: Partial<TaskDetail>): void;
}>();

// Reactive State Variables
const isCaseEditing = ref(false);
const selectedCaseIds = ref<string[]>([]);

// Computed Properties
const taskId = computed(() => {
  return props.dataSource?.id;
});

const associatedCaseList = computed(() => {
  return props.dataSource?.refCaseInfos?.map(item => {
    return {
      ...item,
      linkUrl: `/test#${TestMenuKey.CASES}?id=${item.id}&projectId=${props.projectId}`
    };
  }) || [];
});

const associatedCaseIds = computed(() => {
  return associatedCaseList.value.map(item => item.id);
});

// Case Association Management Functions
/**
 * <p>Initialize case association editing mode</p>
 * <p>Enables editing state for case associations</p>
 */
const startCaseAssociationEditing = () => {
  isCaseEditing.value = true;
};

/**
 * <p>Cancel case association editing</p>
 * <p>Exits editing mode without saving changes</p>
 */
const cancelCaseAssociationEditing = () => {
  isCaseEditing.value = false;
};

/**
 * <p>Confirm case association changes</p>
 * <p>Saves the selected case associations and updates the task</p>
 */
const confirmCaseAssociationChanges = async () => {
  const updateParams = {
    refCaseIds: selectedCaseIds.value
  };
  isCaseEditing.value = false;
  const [error] = await issue.updateTask(taskId.value, updateParams);
  if (error) {
    return;
  }

  const updatedTaskData = await fetchTaskDetails();
  emit('change', updatedTaskData);
};

/**
 * <p>Handle case selection change</p>
 * <p>Updates the selected case IDs when user selects new cases</p>
 */
const handleCaseSelectionChange = (ids: string[]) => {
  selectedCaseIds.value = ids;
};

// Data Loading Functions
/**
 * <p>Load task details</p>
 * <p>Fetches complete task information from the server</p>
 */
const fetchTaskDetails = async (): Promise<Partial<TaskDetail>> => {
  emit('loadingChange', true);
  const [error, res] = await issue.getTaskDetail(taskId.value);
  emit('loadingChange', false);
  if (error || !res?.data) {
    return { id: taskId.value };
  }

  return res.data;
};
</script>

<template>
  <div class="basic-info-drawer">
    <div class="basic-info-header">
      <div class="flex items-center justify-between">
        <h3 class="basic-info-title">{{ t('common.assocCases') }}</h3>
        <Button
          v-show="!isCaseEditing"
          type="link"
          class="edit-btn"
          @click="startCaseAssociationEditing">
          <Icon icon="icon-shuxie" />
        </Button>
      </div>
    </div>

    <!-- Scrollable Content Area -->
    <div class="scrollable-content">
      <div class="basic-info-content">
        <template v-if="!isCaseEditing">
          <div v-if="associatedCaseList.length" class="w-full space-y-1.5 truncate">
            <RouterLink
              v-for="item in associatedCaseList"
              :key="item.id"
              :to="item.linkUrl"
              target="_blank"
              class="flex items-center overflow-hidden">
              <Icon icon="icon-gongnengyongli" class="text-4 flex-shrink-0" />
              <span class="truncate ml-1">{{ item.name }}</span>
            </RouterLink>
          </div>

          <NoData
            v-else
            size="small"
            style="height: calc(100% - 30px);" />
        </template>

        <template v-else>
          <Select
            :value="associatedCaseIds"
            showSearch
            internal
            allowClear
            :fieldNames="{ label: 'name', value: 'id' }"
            :maxTagCount="10"
            :maxTagTextLength="15"
            :maxTags="20"
            :action="`${TESTER}/func/case?projectId=${props.projectId}&fullTextSearch=true`"
            class="w-full"
            :placeholder="t('common.placeholders.selectCase')"
            mode="multiple"
            @change="handleCaseSelectionChange">
            <template #option="record">
              <div class="flex items-center leading-4.5 overflow-hidden">
                <Icon icon="icon-gongnengyongli" class="text-4 flex-shrink-0" />
                <div class="link truncate ml-1" :title="record.name">
                  {{ record.name }}
                </div>
                <div
                  v-if="record.overdue"
                  class="flex-shrink-0 border border-status-error rounded px-0.5 ml-2"
                  style="transform: scale(0.9);color: rgba(245, 34, 45, 100%);line-height: 16px;">
                  <span class="inline-block transform-gpu">{{ t('status.overdue') }}</span>
                </div>
              </div>
            </template>
          </Select>

          <div class="flex items-center space-x-2.5 mt-2.5 justify-end">
            <Button
              type="default"
              size="small"
              @click="cancelCaseAssociationEditing">
              {{ t('actions.cancel') }}
            </Button>
            <Button
              type="primary"
              size="small"
              @click="confirmCaseAssociationChanges">
              {{ t('actions.confirm') }}
            </Button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Main container styles */
.basic-info-drawer {
  width: 370px;
  height: 100%;
  background: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header styles */
.basic-info-header {
  padding: 12px 20px 8px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.basic-info-title {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin: 0;
  line-height: 1.2;
}

/* Scrollable content area */
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Content area styles */
.basic-info-content {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Edit button styles */
.edit-btn {
  flex-shrink: 0;
  padding: 0;
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #1890ff !important;
  cursor: pointer;
  transition: color 0.2s;
}

.edit-btn:focus {
  color: #1890ff !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.edit-btn:hover {
  color: #1890ff;
}

.edit-btn .anticon {
  font-size: 12px;
}
</style>
